import React, { Component } from 'react'
import './index.scss'
import { Flex } from 'antd'
import {
  ContainerOutlined,
  ReconciliationOutlined,
  SaveOutlined,
  UserOutlined,
} from '@ant-design/icons'
import dashBoardApi from './api'


export default class DashBoard extends Component<{}, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      userNum: 0,
      questionNum: 0,
      testPaperNum: 0,
      examNum: 0,
      userInfo: {},
    }
  }
  componentDidMount(): void {
    this.getDashBoardData()
    this.getUserInfo()
  }
  async getDashBoardData() {
    await dashBoardApi.getNum().then((res: any) => {
      this.setState({
        userNum: res.userNum,
        questionNum: res.questionNum,
        testPaperNum: res.testPaperNum,
        examNum: res.examNum,
      })
    })
  }

  getUserInfo() {
    // 获取用户信息
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    if (userInfo) {
      this.setState({
        userInfo, 
      })
    }
  }

  render() {
    return (
      <Flex justify="space-between">
        <Flex gap="1rem" vertical className='dash-userinfo'>
          <div className="board-title">用户名：{this.state.userInfo.name}</div>
          <div className="board-title">权限：{this.state.userInfo.auth}</div>
          <div className="board-title">手机号：{this.state.userInfo.phone}</div>
          <div className="board-title">邮箱：{this.state.userInfo.email || '--'}</div>
        </Flex>
        <Flex gap="1rem">
          <Flex
            vertical
            justify="center"
            align="center"
            gap="0.5rem"
            className="dashbox">
            <UserOutlined style={{ fontSize: '22px' }}></UserOutlined>
            <div className="board-title">用户数</div>
            <div className="num-text">{this.state.userNum}</div>
          </Flex>
          <Flex
            vertical
            justify="center"
            align="center"
            gap="0.5rem"
            className="dashbox">
            <ContainerOutlined style={{ fontSize: '22px' }} />
            <div className="board-title">题目数</div>
            <div className="num-text">{this.state.questionNum}</div>
          </Flex>
          <Flex
            vertical
            justify="center"
            align="center"
            gap="0.5rem"
            className="dashbox">
            <ReconciliationOutlined style={{ fontSize: '22px' }} />
            <div className="board-title">试卷数</div>
            <div className="num-text">{this.state.testPaperNum}</div>
          </Flex>
          <Flex
            vertical
            justify="center"
            align="center"
            gap="0.5rem"
            className="dashbox">
            <SaveOutlined style={{ fontSize: '22px' }} />
            <div className="board-title">笔试数</div>
            <div className="num-text">{this.state.examNum}</div>
          </Flex>
        </Flex>
      </Flex>
    )
  }
}
